<template>
	<view class="container">
		<!-- 搜索框 -->
		<u-sticky customNavHeight="0">
			<view class="search">
				<view class="u-flex u-flex-items-center u-flex-items-start search-input">
					<u-input v-model="keyword" confirmType="search" class="input" prefixIcon="search" prefixIconStyle="font-size:40rpx;color:#999999;" placeholder="请输入顾客姓名" placeholderStyle="#999999;font-size:26rpx;" border="none" :clearable="true" @confirm="search"></u-input>
					<u-line color="#D7D7D7" length="32rpx" direction="col" margin="0 20rpx"></u-line>
					<view class="search_btn" @click="search">查询</view>
				</view>
			</view>
		</u-sticky>
		<!-- 内容列表 -->
		<view class="customer_list">
			<u-radio-group v-model="radiovalue">
				<block v-for="(item, index) in dataList" :ket="index">
					<view class="u-flex u-flex-items-start list" @click="radioChange(item)">
						<view class="radio_box">
							<u-radio :name="item.sId" @change="radioChange(item)"></u-radio>
						</view>
						<view class="avatar">
							<u-avatar shape="square" :src="item.customerProfile||'/static/imagse/avatar.png'"></u-avatar>
						</view>
						<view class="customer_info">
							<view class="u-flex u-flex-items-center u-flex-items-start">
								<text class="name Medium">{{item.name}}</text>
								<uni-icons v-if="item.gender==1" size="20" color="#2F86F6" custom-prefix="iconfont" type="icon-nansheng"></uni-icons>
								<uni-icons v-if="item.gender==0" size="20" color="#FF8080" custom-prefix="iconfont" type="icon-nvsheng"></uni-icons>
								<text v-if="item.ages" class="ages">{{item.ages}}岁</text>
							</view>
							<view class="appointment_time">上次预约日期：{{item.makeTime}}</view>
							<view class="customer_type">活动邀约顾客</view>
						</view>
					</view>
				</block>
			</u-radio-group>
			<view class="u-flex u-flex-items-center u-flex-center confirm_info_btns">
				<u-button size="large" text="新增" :plain="true" :hairline="true" color="#4179FF" :customStyle="{width:'325rpx',height:'80rpx',fontSize:'34rpx',borderRadius:'12rpx',color:'#4179FF',fontWeight:'600',margin:'0'}" @click="toHistory"></u-button>
				<view style="width: 20rpx;"></view>
				<u-button size="large" text="确认" :hairline="false" color="#4179FF" :customStyle="{width:'325rpx',height:'80rpx',fontSize:'34rpx',borderRadius:'12rpx',color:'#FFFFFF',fontWeight:'600',margin:'0'}" @click="confirm"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberMessageFindList
	} from '@/config/api.js';
	export default {
		data() {
			return {
				keyword: '', //搜索关键字
				radiovalue: '', //顾客数据默认选中
				customerId: '',
				customerName: '',
				customerInviteId: '',
				page: 1, //页码
				limit: 20, //每页条数
				dataList: [], //顾客数据
				activityDayId: '', //活动日id
				activityStartTime: '', //活动开始时间
				storeId: '', //店面ID
				skId: '', //顾客成交明细id
			}
		},
		onLoad(options) {
			let that = this;
			let activityDayId = options.activityDayId;
			let activityStartTime = options.activityStartTime;
			let storeId = options.storeId;
			if (uni.$u.test.isEmpty(activityDayId) === false) {
				that.activityDayId = activityDayId;
				that.activityStartTime = activityStartTime;
				that.storeId = storeId;
			}
			that.getList('init');
		},
		onPullDownRefresh() {
			let that = this;
			that.initList();
			that.getList('init');
		},
		onReachBottom() {
			let that = this;
			that.getList('loadmore');
		},
		methods: {
			initList() {
				let that = this;
				that.page = 1;
				that.dataList = [];
			},
			// 搜索
			search() {
				let that = this;
				that.initList();
				that.getList('init');
			},
			// 获取邀约顾客数据
			getList(status) {
				let that = this;
				let page = status == 'loadmore' ? that.page + 1 : 1;
				let params = {
					token: that.vuex_token,
					userId: that.vuex_userId,
					userType: that.vuex_user.userType,
					activityDayId: that.activityDayId, //活动日
					name: that.keyword, //搜索关键字
					page: page,
					limit: that.limit
				};
				memberMessageFindList(params).then((res) => {
					if (res.data.findStageList.length > 0) {
						that.page = page;
						if (status == 'init') {
							that.dataList = res.data.findStageList;
						} else if (status == 'loadmore') {
							that.dataList = that.dataList.concat(res.data.findStageList);
						}
					} else {
						uni.$u.toast(res.msg);
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('memberMessageFindList=', err);
					uni.stopPullDownRefresh();
				});
			},
			// 单选按钮事件
			radioChange(radioItem) {
				let that = this;
				that.radiovalue = radioItem.sId;
				that.customerId = radioItem.id;
				that.customerName = radioItem.name;
				that.customerInviteId = radioItem.sId;
				that.skId = radioItem.skId;
			},
			// 跳转历史顾客
			toHistory() {
				let that = this;
				uni.$u.route({
					url: '/pages/historyCustomer/historyCustomer',
					params: {
						activityDayId: that.activityDayId,
						activityStartTime: that.activityStartTime,
						storeId: that.storeId
					}
				});
			},
			// 确认
			confirm() {
				let that = this;
				if (!that.radiovalue) {
					uni.$u.toast('请先选择客户');
				} else {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.customerId = that.customerId;
					prevPage.$vm.customerName = that.customerName;
					prevPage.$vm.customerInviteId = that.customerInviteId;
					prevPage.$vm.skId = that.skId;
					uni.$u.route({
						type: 'navigateBack'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F4F4;

		.container {
			.search {
				background: #4179FF;
				padding: 16rpx 20rpx 14rpx;

				.search-input {
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 35rpx;
					padding: 0 26rpx;

					.input {
						flex: 1;
						height: 30rpx;
						padding: 0 !important;
						color: #333333;

						font-size: 26rpx;
						line-height: 30rpx;
					}

					.search_btn {
						width: 85rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;

						font-size: 26rpx;
						color: #4179FF;
					}
				}
			}

			.customer_list {
				padding: 18rpx 20rpx 140rpx;

				.list {
					padding: 30rpx 20rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					width: 100%;

					.radio_box {
						margin: 22rpx 8rpx 0 0;
					}

					.avatar {
						width: 88rpx;
						height: 88rpx;
						background-color: #DDDDDD;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.customer_info {
						margin-left: 20rpx;

						.name {

							font-size: 30rpx;
							line-height: 34rpx;
							color: #333333;
							margin-right: 20rpx;
						}

						.ages {
							margin-left: 20rpx;

							font-size: 30rpx;
							line-height: 34rpx;
							color: #888888;
						}

						.appointment_time {
							color: rgba(136, 136, 136, 1);
							font-size: 28rpx;

							line-height: 32rpx;
							margin-top: 20rpx;
						}

						.customer_type {

							font-size: 28rpx;
							line-height: 32rpx;
							color: #888888;
							margin-top: 20rpx;
						}

						.appointment_type {
							width: 100rpx;
							height: 40rpx;
							border: 2rpx solid #DDDDDD;
							border-radius: 4rpx;

							font-size: 24rpx;
							line-height: 40rpx;
							color: #888888;
							text-align: center;
							margin-top: 14rpx;
						}
					}
				}

				.confirm_info_btns {
					width: 100%;
					height: 140rpx;
					background-color: #F4F4F4;
					position: fixed;
					bottom: 0;
					left: 0;
				}
			}
		}

		.u-radio-group--row {
			flex-wrap: wrap;
		}

		.u-avatar--square,
		/deep/.u-avatar__image--square[data-v-b36130f2] {
			width: 88rpx !important;
			height: 88rpx !important;
		}
	}
</style>